<ng-container *ngIf="item.damage">
    <div *ngIf="item.damage.dps">
        <ng-container *ngTemplateOutlet="damage; context: { prop: 'dps', name: 'DPS'}">
        </ng-container>
    </div>
    <div *ngIf="item.damage.pdps">
        <ng-container *ngTemplateOutlet="damage; context: { prop: 'pdps', name: 'Physical DPS'}">
        </ng-container>
    </div>
    <div *ngIf="item.damage.edps">
        <ng-container *ngTemplateOutlet="damage; context: { prop: 'edps', name: 'Elemental DPS'}">
        </ng-container>
    </div>
</ng-container>

<ng-container *ngFor="let prop of properties">
    <div *ngIf="item.properties[prop]" [ngSwitch]="prop">
        <ng-container *ngSwitchCase="'weaponCriticalStrikeChance'">
            <ng-container
                *ngTemplateOutlet="value; context: { prop: prop, key: 'ItemDisplayWeaponCriticalStrikeChance', range: true, disabled: !isWeapon}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'weaponAttacksPerSecond'">
            <ng-container
                *ngTemplateOutlet="value; context: { prop: prop, key: 'ItemDisplayWeaponAttacksPerSecond', range: true, disabled: !isWeapon}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'weaponRange'">
            <ng-container
                *ngTemplateOutlet="static; context: { prop: prop, key: 'ItemDisplayWeaponRange'}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'shieldBlockChance'">
            <ng-container
                *ngTemplateOutlet="value; context: { prop: prop, key: 'ItemDisplayShieldBlockChance', range: true, disabled: !isArmour}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'armourArmour'">
            <ng-container
                *ngTemplateOutlet="value; context: { prop: prop, key: 'ItemDisplayArmourArmour', range: true, disabled: !isArmour}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'armourEvasionRating'">
            <ng-container
                *ngTemplateOutlet="value; context: { prop: prop, key: 'ItemDisplayArmourEvasionRating', range: true, disabled: !isArmour}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'armourEnergyShield'">
            <ng-container
                *ngTemplateOutlet="value; context: { prop: prop, key: 'ItemDisplayArmourEnergyShield', range: true, disabled: !isArmour}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'stackSize'">
            <ng-container
                *ngTemplateOutlet="static; context: { prop: prop, key: 'ItemDisplayStackSize'}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'gemLevel'">
            <ng-container *ngTemplateOutlet="value; context: { prop: prop, key: 'Level', range: false}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'mapTier'">
            <ng-container *ngTemplateOutlet="query; context: { prop: prop, key: 'ItemDisplayMapTier'}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'mapQuantity'">
            <ng-container
                *ngTemplateOutlet="query; context: { prop: prop, key: 'ItemDisplayMapQuantityIncrease'}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'mapRarity'">
            <ng-container
                *ngTemplateOutlet="query; context: { prop: prop, key: 'ItemDisplayMapRarityIncrease'}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'mapPacksize'">
            <ng-container
                *ngTemplateOutlet="query; context: { prop: prop, key: 'ItemDisplayMapPackSizeIncrease'}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'heistAreaLevel'">
            <ng-container
                *ngTemplateOutlet="value; context: { prop: prop, key: 'ItemDisplayHeistContractLevel', range: true}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'heistWingsRevealed'">
            <ng-container
                *ngTemplateOutlet="query; context: { prop: prop, key: 'ItemDisplayHeistBlueprintWings'}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'heistEscapeRoutesRevealed'">
            <ng-container
                *ngTemplateOutlet="query; context: { prop: prop, key: 'ItemDisplayHeistBlueprintEscapeRooms'}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'heistSecretRewardRoomsRevealed'">
            <ng-container
                *ngTemplateOutlet="query; context: { prop: prop, key: 'ItemDisplayHeistBlueprintRewardRooms'}">
            </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'quality'">
            <app-item-frame-query [(property)]="queryItem.properties[prop]" [value]="item.properties[prop]">
                <app-item-frame-value-group>
                    <ng-container *ngIf="item.properties.qualityType">
                        <span>
                            {{('Quality' + item.properties.qualityType) | clientString:language}}:&nbsp;</span>
                    </ng-container>
                    <ng-container *ngIf="!item.properties.qualityType">
                        <span>{{'Quality' | clientString:language}}:&nbsp;</span>
                    </ng-container>
                    <span [class]="item.properties[prop].augmented ? 'purpel' : 'white'">
                        <app-item-frame-value [(value)]="item.properties[prop]" [minRange]="0" [maxRange]="0.5">
                        </app-item-frame-value>
                    </span>
                </app-item-frame-value-group>
            </app-item-frame-query>
        </ng-container>
        <ng-container *ngSwitchCase="'heistReinforcements'">
            <ng-container
                *ngTemplateOutlet="static; context: { prop: prop, key: 'ItemDisplayHeistMaxReinforcements'}">
            </ng-container>
        </ng-container>        
        <ng-container *ngSwitchCase="'gemExperience'">
            <ng-container *ngTemplateOutlet="query; context: { prop: prop, key: 'Experience'}">
            </ng-container>
        </ng-container>
    </div>
</ng-container>

<ng-template #damage let-name="name" let-prop="prop">
    <app-item-frame-query [(property)]="queryItem.damage[prop]" [value]="item.damage[prop]">
        <app-item-frame-value-group>
            <span>{{name}}:&nbsp;</span>
            <span class="white">
                <app-item-frame-value [(value)]="item.damage[prop]" [minRange]="minRange" [maxRange]="maxRange">
                </app-item-frame-value>
            </span>
        </app-item-frame-value-group>
    </app-item-frame-query>
</ng-template>

<ng-template #value let-prop="prop" let-key="key" let-range="range" let-disabled="disabled">
    <app-item-frame-query [(property)]="queryItem.properties[prop]" [value]="item.properties[prop]"
        [disabled]="disabled">
        <app-item-frame-value-group>
            <span>{{key | clientString:language}}:&nbsp;</span>
            <span [class]="item.properties[prop].augmented ? 'purpel' : 'white'">
                <app-item-frame-value [(value)]="item.properties[prop]" [minRange]="range ? minRange : 0"
                    [maxRange]="range ? maxRange : 0.5">
                </app-item-frame-value>
            </span>
        </app-item-frame-value-group>
    </app-item-frame-query>
</ng-template>

<ng-template #query let-prop="prop" let-key="key">
    <app-item-frame-query [(property)]="queryItem.properties[prop]" [value]="item.properties[prop]">
        <ng-container *ngTemplateOutlet="static; context: {prop: prop, key: key}"></ng-container>
    </app-item-frame-query>
</ng-template>

<ng-template #static let-prop="prop" let-key="key">
    <span>{{key | clientString:language}}:&nbsp;</span>
    <span [class]="item.properties[prop].augmented ? 'purpel' : 'white'">{{item.properties[prop].text}}</span>
</ng-template>